<template>
  <!--课题(选题)信息（审核/详情）-->
  <div class="edu-page-warp topic-info">
    <DesignCard title="学生信息" v-if="actionType != 'ADD' && actionType != 'EDIT'">
      <el-form :model="studentInfo" ref="studentInfo" label-position="right" label-suffix="：" label-width="100px">
          <el-row>
                    <el-col :span="6">
                        <el-form-item label="学号" prop="studentId">
                            <span>{{studentInfo.studentId}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="姓名" prop="studentName">
                            <span>{{studentInfo.studentName}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="学院" prop="faculty">
                            <span>{{studentInfo.faculty}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="专业" prop="subject">
                            <span>{{studentInfo.subject}}</span>
                        </el-form-item>
                    </el-col>
          </el-row>
          <el-row>
                    <el-col :span="6">
                        <el-form-item label="方向" prop="direction">
                            <span>{{studentInfo.direction}}</span>
                        </el-form-item>
                    </el-col>
          </el-row>
      </el-form>
    </DesignCard>
    <DesignCard title="毕业论文(设计)任务书">
      <!--基本信息-->
      <el-form :model="basicInfoForm" ref="basicInfoForm" label-position="right" label-suffix="：" :label-width="labelWidth">
        <el-row>
          <el-col>
            <el-form-item label="课题名称" prop="projectName">
              <el-input v-model="basicInfoForm.projectName" class="topic-input-select" disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <!-- disabled="true" -->
            <el-form-item label="副标题">
              <el-input v-if="actionType == 'EDIT'" v-model="basicInfoForm.subTitle" class="topic-input-select" ></el-input>
              <el-input v-else v-model="basicInfoForm.subTitle" class="topic-input-select" disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item v-if="subjectType == '2'" label="毕业设计(论文)的课题背景" prop="background">
             <el-input :disabled="actionType !== 'ADD' && actionType !== 'EDIT'" v-model="basicInfoForm.background" class="topic-input-select" type="textarea" :rows="4" maxlength="3000" show-word-limit placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item v-if="subjectType === '2'" label="毕业设计(论文)的技术参数" prop="desire">
              <el-input :disabled="actionType !== 'ADD' && actionType !== 'EDIT'" v-model="basicInfoForm.desire" class="topic-input-select" type="textarea" :rows="4" maxlength="3000" show-word-limit placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item v-if="subjectType === '2'" label="毕业设计(论文)应完成的具体工作" prop="content">
              <el-input :disabled="actionType !== 'ADD' && actionType !== 'EDIT'" v-model="basicInfoForm.content" class="topic-input-select" type="textarea" :rows="4" maxlength="3000" show-word-limit placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item v-if="subjectType === '1'" label="毕业论文(设计)的要求" prop="desire">
              <el-input :disabled="actionType !== 'ADD' && actionType !== 'EDIT'" v-model="basicInfoForm.desire" class="topic-input-select" type="textarea" :rows="4" maxlength="3000" show-word-limit placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item v-if="subjectType === '1'" label="毕业论文(设计)的工作内容" prop="content">
              <el-input :disabled="actionType !== 'ADD' && actionType !== 'EDIT'" v-model="basicInfoForm.content" class="topic-input-select" type="textarea" :rows="4" maxlength="3000" show-word-limit placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="毕业论文(设计)的安排进度" prop="arrange">
              <el-input :disabled="actionType !== 'ADD' && actionType !== 'EDIT'" v-model="basicInfoForm.arrange" class="topic-input-select" type="textarea" :rows="4" maxlength="3000" show-word-limit placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="应收集的资料及主要参考文献" prop="dueTo">
              <el-input :disabled="actionType !== 'ADD' && actionType !== 'EDIT'" v-model="basicInfoForm.dueTo" class="topic-input-select" type="textarea" :rows="4" maxlength="3000" show-word-limit placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div v-if="actionType === 'ADD' || actionType === 'EDIT'">
        <hr>
        <div class="edu-opertion-bar">
          <div class="float-right">
            <el-button @click="onCancel">取消</el-button>
            <el-button type="primary" @click="onSave">保存</el-button>
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </div>
        </div>
      </div>
    </DesignCard>

    <!--审核 仅审核状态时("REVIEW_STU"/"REVIEW_TUTOR")可见-->
    <el-card shadow="never" v-if="actionType == 'REVIEW'">
      <el-row :gutter="20" type="flex" align="center" justify="space-between" style="margin:16px 0">
        <el-col>
          <span class="topic-title">审核</span>
        </el-col>
      </el-row>
      <el-form :model="reviewForm" ref="reviewForm" :rules="reviewRules" label-position="right" label-suffix="：" :label-width="labelWidth">
        <el-form-item label="审核说明" prop="remark">
          <el-input v-model="reviewForm.remark" class="topic-input-select" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="驳回时必填"></el-input>
        </el-form-item>
      </el-form>
      <div class="float-right bottom-btn">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="danger" @click="onReject">驳回</el-button>
        <el-button type="primary" @click="onPass">通过</el-button>
      </div>
    </el-card>

    <!--审核进度 在申报("ADD"),编辑("EDIT"),查看分配课题("VIEW_ASSIGN"),查看课题信息("VIEW_INFO")状态时不可见-->
    <DesignCard title="审核进度" v-if="actionType == 'REVIEW' || actionType == 'VIEW_TEACHER'">
      <edu-table ref="reviewProgressTable" :data="progressData" :selection="false" :pagination="false">
        <edu-table-column label="时间" prop="time" :formatter="formatDate" min-width="120"></edu-table-column>
        <edu-table-column label="审批人" min-width="100">
          <template slot-scope="scope">
            <span>{{scope.row.approvorName}}【{{scope.row.approvorId}}】</span>
          </template>
        </edu-table-column>
        <edu-table-column label="角色" prop="role" min-width="90"></edu-table-column>
        <edu-table-column label="审批结果" prop="result" min-width="90">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.result === 'COMMIT'" type="success">提交</el-tag>
            <el-tag v-if="scope.row.result === 'Process'" type="success">通过</el-tag>
            <el-tag v-if="scope.row.result === 'End'" type="info">已结束</el-tag>
            <el-tag v-if="scope.row.result === 'Reject'" type="warning">已驳回</el-tag>
          </template>
        </edu-table-column>
        <edu-table-column label="审批说明" prop="content" min-width="120"></edu-table-column>
      </edu-table>
    </DesignCard>
  </div>
</template>
<script>
import API from "common/src/api/underGraduationDesign/tutorDeclareSubject";
import filters from "common/src/filters";

export default {
  name: 'taskInfo',
  props: {
    labelWidth: {
      type: String,
      default: "150px"
    },
    basicInfoForm: {
      type: Object,
      default: function () {
        return {
          proTotalId: '',
          projectName: '',
          background: '',
          desire: '',
          content: '',
          arrange: '',
          dueTo: '',
          subTitle: ''
        };
      }
    },
    studentInfo: {
      type: Object,
      default: {
        studentId: '',
        studentName: '',
        faculty: '',
        subject: '',
        direction: '',
      }
    },
    reviewForm: {
      type: Object,
      default: {
        remark: ''
      }
    },
    progressData: {
      type: Array,
      default: []
    },
    actionType: {
      type: String,
      default: ""
    },
    subjectType: {
        type: String,
        default: ""
    }
  },
  data() {
    return {
      api: API,
      reviewRules: {
        remark: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      actionMap: {
        ADD: "新增任务书",
        REVIEW: "审核任务书",
        EDIT: "编辑任务书",
        VIEW_TEACHER: "老师查看任务书",
        VIEW_STU: "学生查看任务书"
      },
      admissionGrade: '' //入学年级
    };
  },
  created() {
    console.info(this.basicInfoForm)
  },
  mounted() {
    this.reviewForm.remark = '';
  },
  methods: {
    formatDate(row, column, cellValue, index) {
      return filters.formatDate(cellValue, "yyyy/MM/dd hh:mm:ss");
    },
    // 保存
    onSave() {
      this.basicInfoForm.status = "WaitCommit";
      const params = {
        actionType: this.actionType,
        data: this.basicInfoForm
      };
      this.$emit("topic-save", params);
    },
    // 提交
    onSubmit() {
      this.basicInfoForm.status = "Process";
      const params = {
        actionType: this.actionType,
        data: this.basicInfoForm
      }
      this.$emit("topic-save", params);
    },
    // 通过
    onPass() {
      let params = {};
      params = {
        no: this.basicInfoForm.flowNo,
        type:1,
        content: this.reviewForm.remark
      };
      this.reviewRules.remark = [];
      this.$refs.reviewForm.clearValidate();
      this.$emit("topic-pass", params);
    },
    // 驳回
    onReject() {
      let params = {};
      params = {
        no: this.basicInfoForm.flowNo,
        type: 2,
        content: this.reviewForm.remark
      };
      this.reviewRules.remark = [{ required: true, message: '请输入', trigger: 'blur' }];
      this.$refs.reviewForm.validate(valid => {
        if (valid) {
          this.$emit("topic-reject", params);
        } else {
          return false;
        }
      });
    },
    // 取消
    onCancel() {
      this.$emit("topic-cancel");
    }
  }
}
</script>
<style lang="scss" scoped>
.topic-info {
    .topic-title {
        color: #2b3b4e;
        font-size: 18px;
        line-height: 24px;
        font-weight: bold;
    }
    .topic-input-select {
        width: 100%;
    }
    .topic-form-title {
        ::v-deep .el-form-item__label {
            font-weight: bold;
        }
    }
    .bottom-btn {
        margin-bottom: 10px;
    }
}
</style>
